<template>
  <view class="container">
    <!-- 头像和用户名部分 -->
    <view class="profile">
      <image class="avatar" src="@/static/head.png" mode="aspectFill"></image>
      <text class="username">{{ userInfo.username }}</text>
    </view>

    <view class="s">
    <!-- 第一个部分 -->
    <view class="section">
      <text class="section-title">普惠金融</text>
      <view class="section-content">
        <!-- 这里放第一个部分的内容 -->
        <view class="content">
         <img class="img" src="@/static/c_11.jpg" alt="c_11">
        <text>小资快贷</text>
        </view>
         <view class="content">
         <img class="img" src="@/static/c_12.jpg" alt="c_12">
        <text>农户快贷</text>
        </view>
         <view class="content">
         <img class="img" src="@/static/c_13.jpg" alt="c_13">
        <text>学e费</text>
        </view>
      </view>
    </view>

    <!-- 第二个部分 -->
    <view class="section">
      <text class="section-title">热门话题</text>
      <view class="section-content">
        <!-- 这里放第二个部分的内容 -->
        <text>你同意农村金融基础设施能够解决融资难，融资贵的问题吗？</text>
        <img class="bi" src="@/static/agree.jpg" alt="`bi">
      </view>
    </view>

    <!-- 第三个部分 -->
    <view class="section">
      <text class="section-title">政务服务</text>

      <view class="s_2">
      <view class="section-content2">
        <text class="text1">河南政务</text>
        <img class="s1" src="@/static/s11.png" alt="s11">
      </view>

      <view class="section-content2">
        <text class="text1">医保凭证</text>
        <img class="s1" src="@/static/s12.png" alt="s11">
    </view>
     <view class="section-content2">
         <text class="text2">社保</text>
        <img class="s1" src="@/static/s13.png" alt="s11">
      </view>

      <view class="section-content2">
          <text class="text3">公积金</text>
        <img class="s1" src="@/static/s14.png" alt="s11">
    </view>
</view>
    </view>
    
    </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '1350356478'
      },
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.profile {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 2px solid #87caf1; /* 黑色边框 */
  border-radius: 20px; /* 圆角 */
  padding: 10px; /* 可选：增加内边距使内容不贴紧边框 */
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 20px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.section-content {
  background-color: #f0f0f0;
  border: 1px solid #f6f5f5; /* 黑色边框 */
  border-radius: 10px; /* 圆角 */
  padding: 10px; /* 可选：增加内边距使内容不贴紧边框 */
  display: flex;
  flex-direction: row;
  
}
.section-content2 {
  background-color: #f0f0f0;
  border: 1px solid #f6f5f5; /* 黑色边框 */
  border-radius: 10px; /* 圆角 */
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80px;
  width: 120px;
  margin-left: 5px;
  margin-top: 10px;
  
}
.s_2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.s{
   border: 2px solid #87caf1; /* 黑色边框 */
  border-radius: 20px; /* 圆角 */
  padding: 10px; /* 可选：增加内边距使内容不贴紧边框 */
}
.s1{
    height: 45px;
    width: 45px;
    margin-top: 12px;
}
.text1{
    margin-top: 25px;
    font-size: 18px;
}
.text2{
margin-top: 25px;
    font-size: 18px;
    text-indent: 35px;
}

.text3{
margin-top: 25px;
    font-size: 18px;
    text-indent: 20px;
}
.img{
    height: 45px;
    width: 50px;
    border-radius: 50%;
}
.content{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}
.content text{
    margin-left: -3px;
    font-size: 15px;
}
.bi{
    height: 100px;
    width: 300px;
}
</style>
